<template>
	<div class='main-header'>
		<div class='main-tabs'>
			<at-tabs v-model="editableTabsValue" type="card" closable @edit="handleTabsEdit" class='header-tabs' style='position:fixed; margin-left:245px; color:black;'
			 @tab-click='tabClick' @before-leave='test'>
				<at-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">
					<at-breadcrumb separator=">" id="bread-title">
						<at-breadcrumb-item v-for="(list,index) in Breadcrumb" :key="index">{{list}}</at-breadcrumb-item>
					</at-breadcrumb>
				</at-tab-pane>
			</at-tabs>
			<div style="margin:0 20px 10px 20px;" id='main-contain'>
				<transition>
					<keep-alive max="5" :include="keepAliveInclude">
						<router-view :key='$route.fullPath' :closetabs="handleTabsEdit" :editableTabs="editableTabs"></router-view>
					</keep-alive>
				</transition>
			</div>
		</div>
	</div>
</template>

<script>
	const makeBread = (data) => {
	  let ans = []
	  for (let i = 0; i < data.matched.length; i++) {
	    if (data.matched[i].name === undefined || data.matched[i].name == '' || data.matched[i].name.indexOf('@') != -1) {
	      continue
	    } else {
	      ans.push(data.matched[i].name)
	    }
	  }
	  return ans
	}
	export default {
	  name: 'beforeComponent',
	  data () {
	    return {
	      Breadcrumb: []
	    }
	  },
	  computed: {
	    editableTabsValue: {
	      set (val) {
	        this.$store.commit('system/settersRoot', {
	          key: 'editableTabsValue',
	          value: val
	        })
	      },
	      get () {
	        return this.$store.state.system.editableTabsValue
	      }
	    },
	    editableTabs: {
	      set (val) {
	        this.$store.commit('system/settersRoot', {
	          key: 'editableTabs',
	          value: val
	        })
	      },
	      get () {
	        return this.$store.state.system.editableTabs
	      }
	    },
	    keepAliveInclude: {
	      set (val) {
	        this.$store.commit('system/settersRoot', {
	          key: 'keepAliveInclude',
	          value: val
	        })
	      },
	      get () {
	        return this.$store.state.system.keepAliveInclude
	      }
	    }
	  },
	  created () {
	    this.Breadcrumb = makeBread(this.$route)
	  },
	  mounted () {
	    let flg = 0
	    let routeName = this.$route.name
	    if (this.$route.name === undefined || this.$route.name === '' || this.$route.name.indexOf('@') != -1) {
	      for (let i in this.$route.matched) {
	        if (this.$route.matched[i].name === undefined || this.$route.matched[i].name === '' || this.$route.name.indexOf('@') != -1) {
	          if (i != 0) { routeName = this.$route.matched[i - 1].name } else { routeName = '' }
	        }
	      }
	    }
	    for (var i in this.editableTabs) {
	      if (this.$route.fullPath === this.editableTabs[i].name || (this.$route.fullPath.indexOf('monitor/log') != -1 && this.editableTabs[i].name.indexOf('monitor/log') != -1)) {
	        if ((this.$route.fullPath.indexOf('Detail') == -1 && this.editableTabs[i].name.indexOf('Detail') == -1) || (this.$route.fullPath.indexOf('Detail') != -1 && this.editableTabs[i].name.indexOf('Detail') != -1)) {
	          flg = 1
	          var b = this.editableTabs.concat([])
	          b[i] = {
	            'title': routeName,
	            'name': this.$route.fullPath
	          }
	          this.editableTabs = b
	          this.editableTabsValue = this.editableTabs[i].name
	          break
	        }
	      }
	    }
	    if (flg === 0) {
	      if (this.editableTabs.length === 5) {
	        var a = this.keepAliveInclude.concat([])
	        var b = this.editableTabs.concat([])
	        a.shift()
	        b.shift()
	        this.editableTabs = b
	        this.keepAliveInclude = a
	      }
	      var a = this.keepAliveInclude.concat([])
	      var b = this.editableTabs.concat([])
	      b.push(
	        {
	          'title': routeName,
	          'name': this.$route.fullPath
	        }
	      )
	      a.push(this.$route.matched[this.$route.matched.length - 1].components.default.name)
	      this.editableTabs = b
	      this.keepAliveInclude = a
	      this.editableTabsValue = this.$route.fullPath
	    }
	    this.Breadcrumb = makeBread(this.$route)
	  },
	  methods: {
	    test () {
	      return true
	    },
	    handleTabsEdit (targetName, action) {
	      if (this.editableTabs.length > 1) {
	        if (action === 'remove') {
	          let activeName = this.editableTabsValue
	          let tabs = this.editableTabs.concat([])
	          let include = this.keepAliveInclude.concat([])
	          tabs.forEach((tab, index) => {
	            if (tab.name === targetName) {
	              include.splice(index, 1)
	              this.keepAliveInclude = include
	              let nextTab = tabs[index + 1] || tabs[index - 1]
	              if (nextTab) {
	                activeName = nextTab.name
	              }
	            }
	          })
	          this.editableTabs = tabs.filter(tab => tab.name !== targetName)
	          if (this.$route.fullPath == targetName) {
	            this.editableTabsValue = activeName
	            this.jumpAll(activeName)
	          }
	        }
	      } else {
	        this.$notify({
	          title: '提示',
	          message: '最后一个标签页无法关闭',
	          type: 'info'
	        })
	      }
	    },
	    jumpAll (url) {
	      if (url !== null || url !== undefined) {
	        this.$store.dispatch('system/jumpUrl', url)
	      }
	    },
	    tabClick (item) {
	      this.jumpAll(item.name)
	    }
	  },
	  watch: {
	    $route (to) {
	      let flg = 0
	      let routeName = to.name
	      if (to.name === undefined || to.name === '' || to.name.indexOf('@') != -1) {
	        for (let i in to.matched) {
	          if (to.matched[i].name === undefined || to.matched[i].name === '' || to.name.indexOf('@') != -1) {
	            if (i != 0) { routeName = to.matched[i - 1].name } else { routeName = '' }
	          }
	        }
	      }
	      for (var i in this.editableTabs) {
	        if (to.fullPath === this.editableTabs[i].name || (to.fullPath.indexOf('monitor/log') != -1 && this.editableTabs[i].name.indexOf('monitor/log') != -1)) {
	          if ((to.fullPath.indexOf('Detail') == -1 && this.editableTabs[i].name.indexOf('Detail') == -1) || (to.fullPath.indexOf('Detail') != -1 && this.editableTabs[i].name.indexOf('Detail') != -1)) {
	            flg = 1
	            var b = this.editableTabs.concat([])
	            b[i] = {
	              'title': routeName,
	              'name': to.fullPath
	            }
	            this.editableTabs = b
	            this.editableTabsValue = this.editableTabs[i].name
	            break
	          }
	        }
	      }
	      if (flg === 0) {
	        if (this.editableTabs.length === 5) {
	          var a = this.keepAliveInclude.concat([])
	          var b = this.editableTabs.concat([])
	          a.shift()
	          b.shift()
	          this.editableTabs = b
	          this.keepAliveInclude = a
	        }
	        var a = this.keepAliveInclude.concat([])
	        var b = this.editableTabs.concat([])
	        b.push(
	          {
	            'title': routeName,
	            'name': to.fullPath
	          }
	        )
	        a.push(to.matched[to.matched.length - 1].components.default.name)
	        this.editableTabs = b
	        this.keepAliveInclude = a
	        this.editableTabsValue = to.fullPath
	      }
	      this.Breadcrumb = makeBread(to)
	    }
	  }
	}
</script>
<style>
	#bread-title {
		background-color: #fff;
		padding: 10px;
	}
	.at-search .at-input__inner-mh{
		height: 25px !important;
	}
	.at-tabs--card>.at-tabs__header{
		width: 100% !important;
	}
	.at-tabs--card>.at-tabs__header .at-tabs__item.is-active.is-closable{
		background: #f7f8fa;
	}
</style>